<div style="height:{$iHeight}px; position:relative;">
<div style="position:relative;">
<div style="position:absolute;">
<ul style="list-style: none; margin:0px; padding:0px;">
	{$sList}
</ul>
<div style="clear:both;"></div>
</div>
</div>

<ul id="list" style="list-style: none; margin:0px; padding:0px;">
{foreach from=$aTop key=iKey item=aFriend}
	<li class="products" id="item_{$aFriend.friend|replace:'_':'|'}" style="float: left; margin-left:10px; vertical-align:top; height:110px; width:80px; text-align:center; padding-top:5px;">
	<div style="position:relative; width:80px; cursor:move;">
		{Account::Avatar sUser=$aFriend.friend iSize=60 onmouseover="showInfo5('`$aFriend.friend`', '', '');" onmouseout="return nd();"}
		<div style="position:absolute; top:85px; left:4px;">
			<a class="link_action" href="javascript:void(0);" onclick="xajax_displayTopFriends('{$aFriend.friend}', true);">[ {language text="remove"} ]</a>
		</div>
	</div>
	</li>
{/foreach}
</ul>
<div style="clear:both;"></div>
{literal}
<script type="text/javascript">
	Sortable.create("list", {constraint:'horizontal', onUpdate:function(){xajax_updateFriendsCount(Sortable.serialize("list"));}})
</script>
{/literal}
</div>
<div style="margin-bottom:20px;" class="border2">
	<div style="padding:8px; text-align:center; height:80px;" class="border13">	
		{language text='Mod_Account.drop_friends_here'}
		<div id="users_added" style="padding:5px; font-weight:bold;"></div>
	</div>
</div>	
</div>